<!--上报页面-->
<script setup>
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import { useRouter } from 'vue-router/composables'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import UploadTrigger from '@/components/FilePreviewer/UploadTrigger.vue'
import { disposeOrderBack } from '@/apis/order.js'
import { Toast } from 'vant'
import { usePermissionStore } from '@/stores/permission.js'
import { closeAppWebPage } from '@/utils/helper.js'

const { user } = usePermissionStore()

const router = useRouter()
const submitLoading = ref(false)
const reportFormRef = ref('')
const formData = reactive({
  orgName: '',
  orderNo: '',
  opinion: '',
  routerOrigin: '',
  attachmentInfo: []
})
const rules = reactive({
  opinion: [{ required: true, message: '上报原因不能为空！' }]
})
// 提交表单
async function submitForm() {
  reportFormRef.value
    .validate()
    .then(async () => {
      try {
        submitLoading.value = true
        const params = {
          orderNo: formData.orderNo,
          opinion: formData.opinion,
          attachmentInfo: formData.attachmentInfo?.map((item) => ({
            originalName: item.originalName,
            url: item.url
          }))
        }
        const res = await disposeOrderBack(params)
        submitLoading.value = false
        if (res.ret === 0) {
          Toast.success('保存成功')
          if (formData.routerOrigin === 'internal') {
            await router.replace('/workOrder')
          } else {
            closeAppWebPage()
          }
        } else {
          Toast.fail(res.msg || '保存失败')
        }
      } catch (error) {
        submitLoading.value = false
        Toast.fail('网络错误，请稍后再试~')
      }
    })
    .catch((error) => {
      Toast(error[0].message)
    })
}

onMounted(() => {
  formData.orderNo = router.currentRoute.query.orderNo
  formData.routerOrigin = router.currentRoute.query.routerOrigin
  formData.orgName = user.orgName
})
</script>

<template>
  <div class="bg-#F7F8FA h-full">
    <van-form
      ref="reportFormRef"
      class="bg-white"
      scroll-to-error
      :show-error-message="false"
      validate-first
    >
      <van-field
        readonly
        required
        name="sourceType"
        v-model="formData.orgName"
        label="上报机构"
        placeholder="请选择"
        input-align="right"
        label-class="text-16px"
      >
      </van-field>
      <CustomTextarea
        required
        :rules="rules.opinion"
        :modelValue.sync="formData.opinion"
        label="上报原因"
      />
    </van-form>
    <div class="px-16px mt-8px bg-white">
      <DetailItem label="附件" top>
        <FileList
          removable
          :upload="true"
          :preview="true"
          :files.sync="formData.attachmentInfo"
          :imageMax="9"
          :otherMax="0"
        >
          <template #empty="{ handleUpload }">
            <div class="h-80px w-80px" @click="handleUpload">
              <UploadTrigger icon-size="7vw" />
            </div>
          </template>
        </FileList>
      </DetailItem>
    </div>
    <div class="py-24px px-16px">
      <van-button
        :disabled="!formData.orgName || !formData.opinion"
        type="primary"
        size="normal"
        block
        @click="submitForm"
        :loading="submitLoading"
      >
        提交
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.van-cell--required::before {
  left: 22vw;
}
</style>
